<template>
	<view>
		<view class="grid-container margin-sm">

			<view v-for="(item,index) in items">
				<view @click="onClickItem(index)"
					:class="{'bg-red':true,'bg-green':item.isbeike==1,'bg-blue':current==index}"
					class="margin-xs padding-sm round">
					{{item.name}}
				</view>

			</view>
		</view>


		<view v-for="(item1, index1)  in sysScheduleTimetableList" class="margin-sm">
			<view v-if="current === index1" style="padding-bottom: 80rpx;">
				<view v-for="(item,index) in LessonPreparationRecordsTypeList"
					class="margin-top-sm bg-white padding-xs radius">
					<view v-if="item.offlineClassName.includes(offlineClassName)">
						<view style="font-size: 12px;color: #666;;">{{item.title}}</view>
						<view v-for="(ites,index2) in item1.lessonPreparationRecordsModelList">
							<span v-if="ites.type==item.code"
								:style="{cursor: 'pointer',pointerEvents: 'auto',fontSize: '16px',color: ites.pkJson==null?'#F56C6C':'#67C23A'}"
								@click.stop="EditLessonPreparationRecords(item1,ites)">
								{{ FormatTitle(ites) }}
							</span>
						</view>

						<view v-if="item1.lessonPreparationRecordsModelList.every(ites => ites.type !== item.code)"
							style="color: #ccc">
							未备课
						</view>

					</view>
				</view>
			</view>
		</view>

		<!-- <view v-for="(item1, index1)  in sysScheduleTimetableList" class="content">
						<view v-if="current === index1">
							<uni-list>
								<uni-list-item :clickable="true" v-for="(item2, index2) in xiangmu_dangqian"
									:avatar-circle="true" @click="change(index2)"
									:title="shujuchuli(sysScheduleTimetable_dangqian[item2.code], JSON.parse(sysScheduleTimetable_dangqian.jiaoyanoryuejihua.nlJy2))"
									:note="item2.name" rightText=""
									v-if="sysScheduleTimetable_dangqian.jiaoyanoryuejihua!=null&&sysScheduleTimetable_dangqian.jiaoyanoryuejihua.nlJy2!=null">
								</uni-list-item>
							</uni-list>
		
		
						</view>
					</view> -->
		<!-- 普通弹窗 -->
		<view>
			<bianji ref="bianji" @fetchData="fetchData" @refreshData="refreshData"></bianji>
		</view>



	</view>
</template>

<script>
	import Bianji from "@/pages/lpc/kechengguanli/components/ketangjiBianji.vue";
	import {
		doDelete,
		doExportExcel,
		doUpdate,
		getListByBeiKe,
		jiachubagnding,
		signOk,
		xiazaibeike
	} from "@/api/system/academicAffairsCenter/scheduleTimetable/SysScheduleTimetableManagementApi";
	export default {
		components: {
			Bianji
		},
		data() {
			return {

				LessonPreparationRecordsTypeList: [

					//感统课
					{
						id: null,
						title: "静态引入",
						code: "jt",
						titleindexOf: [],
						age: "",
						value: "选择",
						offlineClassName: ["4", "12"]
					},
					{
						id: null,
						title: "热身1",
						code: "rs1",
						titleindexOf: [],
						age: "",
						value: "选择",
						offlineClassName: ["4", "12"]
					},

					{
						id: null,
						title: "热身2",
						code: "rs2",
						titleindexOf: [],
						age: "",
						value: "选择",
						offlineClassName: ["4", "12"]
					},
					{
						id: null,
						title: "静态1",
						code: "jcjingtai1",
						titleindexOf: ["基础身体控制", "基础视觉控制"],
						age: 1,
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},


					{
						id: null,
						title: "静态2",
						code: "jcjingtai2",
						titleindexOf: ["基础身体控制", "基础视觉控制"],
						age: 1,
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},


					{
						id: null,
						title: "主体1",
						code: "xlzt1",
						titleindexOf: [],
						age: 1,
						value: "选择",
						offlineClassName: ["3", "5", "11", "4", "12", "13"]
					},
					{
						id: null,
						title: "主体2",
						code: "xlzt2",
						titleindexOf: [],
						age: 1,
						value: "选择",
						offlineClassName: ["3", "5", "11", "4", "12", "13"]
					},
					{
						id: null,
						title: "主体3",
						code: "xlzt3",
						titleindexOf: [],
						age: 1,
						value: "选择",
						offlineClassName: ["3", "5", "11", "4", "12", "13"]
					},
					{
						id: null,
						title: "主体4",
						code: "xlzt4",
						titleindexOf: [],
						age: null,
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},

					{
						id: null,
						title: "听动/视动1",
						code: "jctdsd1",
						titleindexOf: [],
						age: "7,30",
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},
					{
						id: null,
						title: "听动/视动2",
						code: "jctdsd2",
						titleindexOf: [],
						age: "7,30",
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},
					{
						id: null,
						title: "进阶1",
						code: "jcjj1",
						titleindexOf: [],
						age: "7,30",
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},
					{
						id: null,
						title: "进阶2",
						code: "jcjj2",
						titleindexOf: [],
						age: "7,30",
						value: "选择",
						offlineClassName: ["3", "5", "11", "13"]
					},
					// {
					//   id: null,
					//   title: "听动/视动",
					//   code: "jctdsd1",
					//   titleindexOf: [],
					//   age: "5,8",
					//   value: "选择",
					//   offlineClassName: ["3", "5", "11"]
					// },
					//认知情商
					{
						id: null,
						title: "认知情商备课",
						code: "",
						titleindexOf: [],
						age: null,
						value: "点击备课",
						offlineClassName: ["2"]
					},


					{
						id: null,
						title: "互动",
						code: "hudong",
						titleindexOf: [],
						age: "0,4",
						value: "选择",
						offlineClassName: ["4", "12"]
					},
					{
						id: null,
						title: "补充",
						code: "bcxm",
						titleindexOf: [],
						value: "输入",
						offlineClassName: ["4", "12", "3", "5", "11", "13"]
					}
				],
				zhunbeibianjideshuju: { //当前点击了哪个项目。就把需要的数据放这里
					xiangmu_data: { //
						name: "",
						code: ""
					}
				},
				xiangmu_dangqian: [], //项目当前

				sysOfflineTimetableId: "",
				sysScheduleTimetableList: [],
				offlineClassName: null,
				sysScheduleTimetable_dangqian: {}, //当前显示的学生课堂记录
				items: [],
				current: 0,
				radio2: 0,
				radio3: 0,
				sex: [{
					text: '正常',
					value: 0
				}, {
					text: '否定',
					value: 1
				}, {
					text: '失败',
					value: 2
				}],
				OfflineTimetableModel: {
					id: ""
				} //线下班级模型
			}
		},
		onPullDownRefresh() {
			this.getSysScheduleTimetableList()

			uni.stopPullDownRefresh();

		},
		// navigate.vue页面接受参数
		onLoad(option) {

			this.OfflineTimetableModel = option

			console.log('接受到参数');
			this.getSysScheduleTimetableList()
		},

		created() {

		},
		onShow() {


		},
		methods: {
			/**
			 * 回显示数据
			 * @param {Object} index1 第几个孩子 
			 * @param {Object} index2 第几个项目
			 */
			refreshData(index1, index2) {


				for (let s of this.sysScheduleTimetableList) {
					for (let s2 of s.lessonPreparationRecordsModelList) {
						if (s2.id == index2) {
							s2.pkJson = '1'
						}
					}
				}
				// console.log(index1, index2);
			},


			//格式化名称
			FormatTitle(ites) {
				let title = ites.title
				// 去除第一个 / 前面的字符
				return title.substring(title.indexOf('/') + 1)
			},
			/**
			 * 编辑备课 
			 * @param {Object} row 整条数据 
			 * @param {Object} ites 具体项目
			 */
			EditLessonPreparationRecords(row, ites) {
				// this.zhunbeibianjideshuju.xiangmu_data = this.xiangmu_dangqian[index2]
				console.log(1);
				this.$refs["bianji"].open(row, ites)
			},
			getclass(index) {

				let pkNumber = 0
				if (this.sysScheduleTimetableList[index].lessonPreparationRecordsModelList != null) {
					pkNumber = this.sysScheduleTimetableList[index].lessonPreparationRecordsModelList.filter(item2 => item2
						.pkJson != null).length
				}

				if (this.current == index) {
					return "grid-item select"
				} else {

					if (pkNumber == this.items[index].number) {
						return "grid-item gsuccess"
					} else {
						return "grid-item"
					}

				}
			},
			fetchData() {},
			// ids转名称
			shujuchuli(ids, arr) {


				// console.log(models['jt']);
				// // console.log(arr);
				for (const id of arr) {
					if (id.ids == ids) {
						return id.table
					}
				}
				return "无"
			},
			async getSysScheduleTimetableList() {

				const {
					data,
					code,
					msg,
					success
				} = await getListByBeiKe({
					offlineTimetableId_EQ: this.OfflineTimetableModel.id,
					status_NE: '4'
				})

				this.sysScheduleTimetableList = data.rows

				let aa = []
				for (let s of data.rows) {
					this.offlineClassName = s.offlineClassName
					// console.log(s);

					aa.push({
						name: s.customerModel.student.name,
						number: s.lessonPreparationRecordsModelList == null ? 0 : s
							.lessonPreparationRecordsModelList.length,
						pkNumber: 0,
						isbeike: s.isbeike
					});

				}
				this.items = aa
				// this.sysScheduleTimetable_dangqian = this.sysScheduleTimetableList[this.current]

				uni.setNavigationBarTitle({
					title: this.items[this.current].name + '的课堂记录'
				});
				// this.onClickItem(this.current)

				console.log('返回');
				uni.stopPullDownRefresh();

			},
			change(e) {
				this.zhunbeibianjideshuju.xiangmu_data = this.xiangmu_dangqian[e]
				this.$refs["bianji"].open(this.sysScheduleTimetable_dangqian, this.zhunbeibianjideshuju)
			},

			//切换学生
			onClickItem(e) {

				this.sysScheduleTimetable_dangqian = {}
				this.zhunbeibianjideshuju.xiangmu_data = []

				if (this.current != e) {
					this.current = e;
				}
				this.sysScheduleTimetable_dangqian = this.sysScheduleTimetableList[this.current]
				// console.log(this.sysScheduleTimetable_dangqian.offlineClassName);
				if (this.sysScheduleTimetable_dangqian.offlineClassName == '4') {
					this.xiangmu_dangqian = this.xiangmuleix4
				}
				if (this.sysScheduleTimetable_dangqian.offlineClassName == '3' || this.sysScheduleTimetable_dangqian
					.offlineClassName == '5') {
					this.xiangmu_dangqian = this.xiangmuleix3_5
				}

				uni.setNavigationBarTitle({
					title: this.items[e].name + '的课堂记录'

				});
			},
		}
	}
</script>

<style>
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: center; */
	}

	.grid-item {
		/* width: 200rpx; */
		/* height: 150px; */
		padding: 10rpx;
		font-size: 28rpx;
		margin: 5rpx;
		border-radius: 8px;
		background-color: rgb(255, 249, 234);
		/* display: flex; */
		color: rgb(255, 154, 67);
		justify-content: center;
		align-items: center;
	}

	.select {
		background-color: rgb(255, 154, 67);
		/* display: flex; */
		color: rgb(255, 249, 234);
		animation: moveAnimation .5s ease-in-out;
	}

	.gsuccess {
		background-color: #d9ffcc;
		/* display: flex; */
		color: #67C23A;
		animation: moveAnimation .5s ease-in-out;

	}

	@keyframes moveAnimation {
		0% {
			opacity: 0;
			/* background-color: #007bff; */
		}

		100% {
			opacity: 1;
			/* 设置隐藏时不透明度为 0 */

		}
	}

	.flex-itemuni-bg-red {
		width: 15%;
		word-wrap: break-word;
		word-break: break-all;
		color: #7e7e7e;
		font-size: 14px;
	}

	.uni-title__box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 8px 0;
		padding-bottom: 0px;
		flex: 1;
	}
</style>